<template>
  <!-- 营销助手通用 -->
  <div class="adv-two-wrapper">
    <img class="top" :src="chartUrl" :style="{height:bannerHeight+'px'}"/>
    <div class="middle tips g-flex-column-v-center">
      {{caseText[0]}}
    </div>
    <div class="bottom g-flex-sb">
      <div class="left-box g-flex-row" :class="[page!='coupon'?'left-box-50':'left-box-100']">
        <label-item label="剩余权益次数" :text="info.codeBalance"></label-item>
      </div>
      <div class="right-box g-flex-column-c" v-if="page!='coupon'">
        <div>
          <label-item label="短信剩余通知条数" :text="info.smsBalance"></label-item>
          <label-item label="APP消息剩余通知条数" :text="info.pushBalance"></label-item>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import LabelItem from './LabelItem'
import sizeChangeMix from '../onResize/mixin'
export default {
  props:{
    page: String,
    chartUrl: String,
    caseText:{
      type: Array,
      default: () => []
    },
    info:{
      type: Object,
      default: () => ( {} )
    }
  },
  components:{
    LabelItem
  },
  mixins:[sizeChangeMix],
  data(){
    return{
      bannerHeight: 305
    }
  },
}
</script>
<style lang="less" scoped>
.adv-two-wrapper{
  width: 100%;
  padding: 30px 30px 20px;
  margin-bottom: 10px;
  background: #FFFFFF;
  border-radius: 1px;
  box-sizing: border-box;
  .top{
    width: 100%;
    height: 305px;
  }
  .middle{
    height: 68px;
    background: #F3F5FC;
    border-radius: 6px;
    margin: 20px 0;
    padding: 0 20px;
  }
  .tips{
    font-size: 16px;
    color: #3A3874;
  }
  .bottom{
    width: 100%;
    height: 88px;
    .left-box{
      height: 88px;
      background: #E7EBFF;
      border-radius: 6px;
    }
    .left-box-50{
      width: 49%;
      justify-content: center;
    }
    .left-box-100{
      width: 100%;
      padding-left: 20px;
    }
    .right-box{
      width: 49%;
      height: 88px;
      background: #C9EEEA;
      border-radius: 6px;
    }
  }
}
</style>